/** * Created by rubin on 2020/7/5. */

<template>
  <div>
    <pan-simple-header />
    <div class="pan-music-content">
      <div class="left">
        <!-- <div class="music-name-content">
          <p class="music-name">{{ musicName }}</p>
        </div> -->
        <!-- <el-divider></el-divider> -->
        <div class="record-img-content">
          <img class="record-img" src="@/assets/imgs/music.jpeg" />
        </div>
        <!--音频播放容器-->
        <div class="music-content">
          <aplayer
            ref="play"
            autoplay
            v-if="music.src"
            style="margin: 0"
            :music="music"
            :float="true"
          />
        </div>
      </div>
      <div class="music-list-content">
        <el-scrollbar style="height: 500px">
          <el-menu
            class="music-list"
            :default-active="activeIndex"
            @select="selectMusic"
          >
            <el-menu-item
              v-for="(item, index) in musicList"
              :key="index"
              :index="item.fileId"
            >
              <i class="fa fa-music"></i>
              <span slot="title">{{ item.filename }}</span>
            </el-menu-item>
          </el-menu>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import PanSimpleHeader from '../../../components/simple-header'
import fileService from '../../../api/file'
import panUtil from '../../../utils/common'
import Aplayer from 'vue-aplayer'
import musicPic from '@/assets/imgs/music.jpeg'
export default {
  name: 'Music',
  data() {
    return {
      musicName: '',
      musicList: [],
      musicShowPath: '',
      activeIndex: '0',
      musicList2: [],
    }
  },
  components: { PanSimpleHeader, Aplayer },
  methods: {
    init() {
      let _this = this
      fileService.list(
        {
          parentId: _this.$route.params.parentId,
          fileTypes: '8',
        },
        (res) => {
          _this.renderMusicList(res.data)
          _this.listenMusicPlayer()
        },
        (res) => {
          _this.$message.error(res.message)
        }
      )
    },
    selectMusic(index, indexPath) {
      this.activeIndex = index
      this.musicList.some((item) => {
        if (item.fileId === index) {
          this.musicName = item.filename
          this.musicShowPath = panUtil.getPreviewUrl(item.fileId)
          return true
        }
      })
    },
    renderMusicList(dataList) {
      let _this = this
      _this.musicList = new Array()
      dataList.forEach((item, index) => {
        item.filename = item.filename.substring(
          0,
          item.filename.lastIndexOf('.')
        )
        // if (item.filename.length > 15) {
        //   item.filename = item.filename.substring(0, 16) + '...'
        // }
        if (item.fileId === _this.$route.params.fileId) {
          _this.musicName = item.filename
          _this.musicShowPath = panUtil.getPreviewUrl(item.fileId)
        }
        _this.musicList.push(item)
        _this.musicList2.push({
          title: item.filename,
          artist: ' ',
          src: panUtil.getPreviewUrl(item.fileId),
          pic: '',
        })
        _this.activeIndex = _this.$route.params.fileId
      })
    },
    selectNext(currentFileId) {
      let i
      this.musicList.some((item, index) => {
        if (item.fileId === currentFileId) {
          i = index
          return true
        }
      })
      if (i === this.musicList.length - 1) {
        return
      }
      let item = this.musicList[++i]
      this.musicName = item.filename
      this.musicShowPath = panUtil.getPreviewUrl(item.fileId)
      this.activeIndex = item.fileId
    },
    listenMusicPlayer() {
      let _this = this

      //   document.getElementById('r_pan_music_player').addEventListener(
      //     'ended',
      //     () => {
      //       _this.selectNext(_this.activeIndex)
      //     },
      //     false
      //   )
    },
  },
  mounted() {
    //确保页面元素加载完成之后调用
    this.init()
  },
  computed: {
    music() {
      return {
        title: this.musicName,
        artist: ' ',
        src: this.musicShowPath,
        pic: musicPic,
      }
    },
  },
  watch: {
    music: {
      handler(val) {
        const _this = this
        this.$nextTick(() => {
          if (_this.$refs.play) {
            const audio = _this.$refs.play.audio
            audio.addEventListener(
              'ended',
              () => {
                _this.selectNext(_this.activeIndex)
                audio.play()
              },
              false
            )
          }
        })
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>
.pan-music-content {
  width: 100%;
  box-sizing: border-box;
  margin-top: 62px;
  display: flex;
  padding: 20px;
  height: calc(100vh - 62px);
  .left {
    flex: 1;
    background-color: #fff;
    margin-right: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    .music-name-content {
      display: block;
      width: 100%;
      text-align: center;
      padding: 10px 0 0 0;

      .music-name {
        color: #409eff;
        font-size: 30px;
        font-weight: bold;
        font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
          'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
      }
    }

    .record-img-content {
      display: flex;
      width: 100%;
      flex: 1;
      justify-content: center;
      align-items: center;
      //   height: 100%;
      //   margin-top: 80px;
      text-align: center;
      .record-img {
        // width: 300px;
        height: 70%;
        // animation: rotateImg 10s linear infinite;
      }
    }

    @keyframes rotateImg {
      0% {
        transform: rotate(0);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .music-content {
      width: 100%;
      height: 66px;
      display: block;

      //   margin-top: 60px;
      text-align: center;
      //   position: relative;
      #r_pan_music_player {
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
    }
  }

  .music-list-content {
    display: block;
    margin: 0 auto;
    width: 250px;
    height: calc(100vh - 62px - 40px);
    overflow: hidden;
    background-color: #fff;
    .music-list {
      width: 100%;
      height: 100%;
      /* overflow: scroll; */
      i {
        margin-right: 15px;
      }
      span {
        display: inline-block;
        width: 12em;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}

:deep(.is-horizontal) {
  display: none;
}
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
</style>
